<template>
  <div class="container">
    <!-- <div style="height: 10px"></div> -->
    <view class="all">
      <!-- 内容切换 -->
      <!-- <view class="content">
        <div class="card">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center">{{ obj.workOrderNo }}</div>
            <div style=" text-align: center">{{ obj.launchTime }}</div>
            <div :class="obj.workOrderType == 1 ? 'right' : 'right1'"
              style="width: 20%; text-align: center;border-radius: 4px;">
              {{ obj.workOrderType == 0 ? "自派单" : "手工单" }}
            </div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div class="items">
            <div>有机质类型：{{ obj.vehicleOrganicType }}</div>
            <div>车牌号：{{ obj.licenseNumber }}</div>
          </div>
          <div style="height: 10px"></div>
          <div style="font-size: 14px;">
            <div v-for="items in obj.workOrderDetailVOList">
              <u-line color="#83AF92"></u-line>
              <div style="height: 10px"></div>
              <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                <div>任务状态：</div>
                <div>{{ items.workOrderDetailState == 0 ? "待收运" : items.workOrderDetailState == 1 ? '已完成' : '报停中' }}</div>
                <div style="width: 10px;"></div>
                <div>{{ items.completionTime }}</div>
              </div>
              <div style="height: 15rpx;"></div>
              <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                <div>收运点：</div>
                <div>{{ items.farmName }}</div>
              </div>
              <div style="height: 15rpx;"></div>
              <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                <div>收运点负责人：</div>
                <div>{{ items.contactName }}</div>
              </div>
              <div style="height: 15rpx;"></div>
              <div style="display: flex;align-items: center;">
                <div style="display: flex;align-items: center;width: 90%;margin-left: 5%;">
                  <div>预约时间：</div>
                  <div>{{ items.appointTime }}</div>
                </div>
                <div style="width: 5px;"></div>
              </div>
              <div style="height: 15rpx;"></div>
            </div>
          </div>
          <div style="height: 10rpx"></div>
        </div>
        <div style="height: 30rpx"></div>
        <div style="height: 10rpx"></div>
        <div class="status" v-if="obj.workOrderState != 2" @click="cancel">删除任务</div>
        <div style="height: 15rpx"></div>
        <div class="statused" v-if="obj.workOrderState == 6" @click="loos">查看报停</div>
      </view> -->
      <div class="card">
        <div style="height: 10px"></div>
        <div class="card-top">
          <div style="text-align: center;font-size: 18px;font-weight: 500;">基础信息</div>
        </div>
        <div style="height: 10px"></div>
        <u-line color="#83AF92"></u-line>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>订单号码</div>
          <div>{{ obj.workOrderNo }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>派单时间</div>
          <div>{{ obj.launchTime }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>工单类型</div>
          <div>{{ obj.workOrderType == 0 ? "自派单" : obj.workOrderType == 1 ? '手工单' : '' }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>有机质类型</div>
          <div>{{ obj.vehicleOrganicType }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>车牌号码</div>
          <div>{{ obj.licenseNumber }}</div>
        </div>
        <div style="height: 10px"></div>
      </div>
      <div class="card" v-for="items in obj.workOrderDetailVOList">
        <div style="height: 10px"></div>
        <div class="card-top">
          <div style="text-align: center;font-size: 18px;font-weight: 500;">收运点信息</div>
        </div>
        <div style="height: 10px"></div>
        <u-line color="#83AF92"></u-line>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>收运点</div>
          <div>{{ items.farmName }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>收运点负责人</div>
          <div>{{ items.contactName }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>负责人电话</div>
          <div>{{ items.contactPhone }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>任务状态</div>
          <div>{{ items.workOrderDetailState == 0 ? "待收运" : items.workOrderDetailState == 1 ? '已完成' : '报停中' }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>任务预约时间</div>
          <div>{{ items.appointTime }}</div>
        </div>
        <div style="height: 10px"></div>
      </div>
      <div style="height: 10px;"></div>
      <div class="card" v-if="obj.workOrderState == 6">
        <div style="height: 10px;"></div>
        <div class="status" v-if="obj.workOrderState != 2" @click="cancel">删除任务</div>
        <div style="height: 10px;"></div>
        <div class="statused" v-if="obj.workOrderState == 6" @click="loos">查看报停</div>
        <div style="height: 10px;" v-if="obj.workOrderState == 6"></div>
      </div>
      <div class="status" v-if="obj.workOrderState != 2" @click="cancel">删除任务</div>
    </view>
  </div>
</template>
<script>
import { taskDel } from '../api/api.js';
export default {
  data() {
    return {
      obj: {}

    };
  },
  methods: {
    loos() {
      uni.setStorageSync('vehicleId', this.obj.vehicleId);
      uni.navigateTo({
        url: '/pagesDispatch/index/lookStop'
      })
    },
    // 取消任务
    cancel() {
      uni.showModal({
        title: '删除任务',
        content: '确认要删除当前任务吗',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            taskDel(this.obj.id).then(res => {
              console.log(res.data);
              if (res.data.code == 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                  mask: true
                })
                setTimeout(() => {
                  uni.navigateBack({ delta: 2 })
                }, 1000)
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none'
                })
              }
            })

          } else {
            uni.showToast({
              title: '取消',
              icon: 'none',
              mask: true
            })
          }
        }
      })
    },
    // 导航
    addressTo() {
      uni.getLocation({
        type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        success: function (res) {
          uni.openLocation({
            latitude: 121.455244,
            longitude: 31.231876,
            name: '###收运处',
            success: function () {
              console.log('success');
            }
          });
        }
      });
    }
  },
  onLoad() { },
  onShow() {
    this.obj = uni.getStorageSync('taskDetail');
    console.log(this.obj, 'obj');
  }
};
</script>
<style lang="scss">
.newFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.status {
  color: #fff;
  background: #EE5555;
  width: 95%;
  margin-left: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 5px;
}

.statused {
  color: #fff;
  background: #1a512c;
  width: 95%;
  margin-left: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 5px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}
</style>